<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    {include file="common/head" /}
    <style>
        .layui-table-body {
            overflow-x: hidden;
        }
    </style>
</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">订单管理</a>
            <a>
              <cite>订单管理</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="开始日" name="start" id="start">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="uuid" placeholder="请输入订单号" autocomplete="off"
                                   class="layui-input">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit lay-filter="table-search" id="table-search"><i
                                    class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                </div>
                <div class="layui-card-header">
                    <button class="layui-btn layui-btn-danger" data-type="del_all">
                        <i class="layui-icon"></i>批量删除
                    </button>
                </div>
                <div class="layui-card-body ">
                    <table class="layui-table layui-form" id="demo" lay-filter="test"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="__STATIC__/js/jquery-2.1.4.min.js"></script>
<script src="__STATIC__/js/common.js"></script>
<script>
    layui.use(['laydate', 'form', 'table'], function () {
        var laydate = layui.laydate;
        var form = layui.form;
        var table = layui.table;
        //执行一个laydate实例 默认值:type->date,fomat->yyyy-MM-dd
        laydate.render({
            elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });

        //执行渲染
        table.render({
            elem: '#demo'
            , url: 'get_order_list'
            , page: true
            , id: 'idTest'
            , cols: [[
                {checkbox: true}
                , {field: 'id', title: 'ID', sort: true}
                , {field: 'uuid', title: '订单号'}
                , {field: 'payment', title: '付款金额', sort: true}
                , {field: 'nick_name', title: '用户昵称', sort: true}
                , {
                    field: 'status', title: '状态', templet: function (d) {
                        switch (d.status) {
                            case 3 :
                                return ' <span class="layui-btn layui-btn-normal layui-btn-danger">待发货</span>';
                                break;
                            case 4 :
                                return ' <span class="layui-btn layui-btn-normal layui-btn-normal">已发货</span>';
                                break;
                            case 5 :
                                return ' <span class="layui-btn layui-btn-normal layui-btn">交易成功</span>';
                            case 6 :
                                return ' <span class="layui-btn layui-btn-disabled layui-btn">交易关闭</span>';
                                break;
                            default:
                                return ' <span class="layui-btn layui-btn-normal layui-btn-danger">待发货</span>';
                                break;
                        }
                    }
                }
                ,{field: 'is_buyer', title: '身份', templet: function (d){
                        switch (d.is_buyer){
                            case 0 :
                                return '卖家';
                                break;
                            case 1 :
                                return '买家';
                                break;
                        }
                    }
                }
                , {field: 'create_time', title: '创建时间', sort: true}
                , {
                    field: 'right', title: '操作', templet: function (d) {
                        str = '<a href="javascript:;" title="查看详细" lay-event="details"><i class="layui-icon">&#xe60e;</i></a>';
                        return str +
                            '<a href="javascript:;" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>' +
                            '<a href="javascript:;" title="删除" lay-event="delete"><i class="layui-icon">&#xe640;</i></a>';
                    }
                }
            ]]
            , initSort: {
                //默认排序
                field: 'id'
                , type: 'desc'
            }
            , done: function (res, curr, count) {
                //res:接口返回信息, curr:当前页码, count:数据总量
                if (count == 0) {
                    layer.msg('暂无相关信息');
                }
            }
        })

        //监听工具栏事件
        table.on('tool(test)', function (obj) {
            var obj_data = obj.data;
            console.log(obj_data);
            switch (obj.event) {
                case 'edit':
                    var url = '/index.php/admin/order/change_status';
                    layer.confirm('确认修改此订单状态吗?', {icon: 3, title: '确认操作'}, function (index) {
                        var data = {
                            id: obj_data['id'],
                            status: obj_data['status'] == 3 ? 4 : 3,
                            name: obj_data['uuid'],
                        };
                        _ajax_send(url, data, 'get');
                        layer.close(index); //关闭提示框
                    });
                    break;
                case 'delete':
                    layer.confirm('确定要删除该订单吗?', {icon: 3, title: '确认操作'}, function (index) {
                        var url = "{:url('order/del')}";
                        var data = {
                            id: obj_data['id'],
                            name: obj_data['uuid'],
                        };
                        _ajax_send(url, data, 'get');
                        layer.close(index); //关闭提示框
                    });
                    break;
                case 'details':
                    //加载动画
                    var loading = layer.load(1, {shade: [0.3, '#666666']});
                    $.ajax({
                        url: '/index.php/admin/order/details',
                        data: {
                            uuid: obj_data['uuid'],
                        },
                        async: true, //或false,是否异步
                        method: "POST",
                        timeout: 5000, //超时时间
                        datatype: 'json',//返回的数据格式：json/xml/html/script/jsonp/text
                        success: function (result) {
                            //请求成功处理 result->返回数据, status->success
                            var table = layui.table;
                            var str = obj_data['is_buyer'] == 0 ?  '出售书籍' : '购买书籍';
                            if (result.code == 1) { //tp使用success方法
                                layer.open({
                                    title: '订单号: ' + obj_data['uuid']
                                    ,area: '300px;'
                                    ,shade: 0.8
                                    ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                                    ,content: '用户： ' + obj_data['nick_name'] + '<br>' +  str + result.data['name'] +'<br>商品单价:'+ result.data['price']+'<br>商品数量:'+ result.data['number'] + '<br>交易金额:' + result.data['total_fee'] ,
                                });
                                console.log(result.data);
                            } else {
                                layer.msg(result.msg, {icon: 2, time: 1000});
                            }
                        },
                        error: function (xhr, status, error) {
                            //错误处理 xhr->详细数据, status->error, error->错误提示
                            layer.msg('服务器出现异常,请检查后重试', {icon: 2});
                            console.log(xhr);
                        },
                        complete: function () {
                            //请求完成后
                            layer.close(loading);
                        }
                    })
                    break;
            }
            ;
        });

        //监听排序事件
        table.on('sort(test)', function (obj) {
            //asc升序,desc降序,null 这里不需要null类型
            if (obj.type != 'desc' && obj.type != 'asc') {
                obj.type = 'asc';
            }
            table.reload('idTest', {
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
                , where: {
                    'order': obj.field + ' ' + obj.type
                }
            });
        })

        //监听搜索
        form.on('submit(table-search)', function (data) {
            table.reload('idTest', {
                where: {
                    'start': data.field.start
                    , 'end': data.field.end
                    , 'uuid': data.field.uuid
                }
            })
            return false; //页面不刷新
        })

        //键盘事件(敲击回车键相当于点击搜索按钮)
        $(document).keydown(function (e) {
            if (e.keyCode == 13) {
                document.getElementById("table-search").click();
            }
        })

        //批量删除
        $('.layui-btn.layui-btn-danger').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        var active = {
            del_all: function () {
                //获取复选框数据
                var checkStatus = table.checkStatus('idTest')
                    , checkData = checkStatus.data; //得到选中的数据
                if (checkData.length === 0) {
                    return layer.msg('请选择数据');
                }
                console.log(checkData);
                layer.confirm('确定要删除吗?', {icon: 3, title: '确认操作'}, function (index) {
                    var ids = [];
                    var names = [];
                    for (let i in checkData) {
                        ids.push(checkData[i].id);
                        names.push(checkData[i].uuid);
                    }
                    var url = "{:url('order/del')}";
                    var data = {
                        id: ids,
                        name: names,
                    };
                    _ajax_send(url, data, 'get');
                    layer.close(index); //关闭提示框
                });
            }
        };

    });
</script>
</html>